﻿<html>
	<head>
		<style>
			@import url(menu.css);
			body
			{
				background-color : white;
				color            : black;
				margin           : 0px;
				padding          : 0px;
			}
			#show
			{
				display : none;
			}
			#toolbar
			{
				flow             : vertical;
				background-color : silver;
				text-align       : center;
			}
			#toolbar div
			{
				background-image : url(gradient-64.png) repeat-x;
				flow             : horizontal;
				width            : 100%;
			}
			#toolbar div .blank
			{
				width : 64px;
			}
			#toolbar div .separator
			{
				width : 16px;
			}
			.tb-button
			{
				behavior : clickable;
				border   : none;
				height   : 64px;
				margin   : 0px;
				padding  : 0px;
				width    : 64px;
			}
			#title-frame
			{
				background-color : #f0ec40;
				width            : 100%;
			}
			#title
			{
				margin : 8px;
				width  : 100%%;
			}
			#body
			{
				background-color : white;
				background-image : none;
				color            : black;
				height           : 100%%;
				width            : 100%%;
			}

			@set std-checkbox
			{ 
				input:root
				{
					padding-right : 24px;
				}
			}
		</style>
	</head>
	<body>
		<div #panel>
			<widget #toolbar>
				<div>
					<widget .tb-button command="richtext:undo"><img src="rt-undo.png"></widget>
					<widget .tb-button command="richtext:redo"><img src="rt-redo.png"></widget>
					<div .separator/>
					<widget .tb-button command="richtext:copy"><img src="rt-copy.png"></widget>
					<widget .tb-button command="richtext:paste"><img src="rt-paste.png"></widget>
					<div .separator/>
					<widget .tb-button command="richtext:strong"><img src="rt-strong.png"></widget>
					<widget .tb-button command="richtext:em"><img src="rt-em.png"></widget>
					<widget .tb-button command="richtext:u"><img src="rt-u.png"></widget>
				</div>
				<div>
					<widget .tb-button command="richtext:li-ol"><img src="rt-li-ol.png"></widget>
					<widget .tb-button command="richtext:li-ul"><img src="rt-li-ul.png"></widget>
					<div .separator/>
					<widget .tb-button command="richtext:indent-dec"><img src="rt-indent-dec.png"></widget>
					<widget .tb-button command="richtext:indent-inc"><img src="rt-indent-inc.png"></widget>
					<div .separator/>
					<widget .tb-button #check><img src="rt-check.png"></widget>
					<div .blank/>
					<widget .tb-button #hide><img src="rt-hide.png"></widget>
				</div>
			</widget>
			<div #title-frame>
				<input #title />
			</div>
		</div>
		<button #show>Show toolbar</button>
		<richtext #body toolbar="#toolbar" />
	</body>
</html>
